<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/*  结合实际html结构写通配选择器  合理  */
			*{
				font: 16px "微软雅黑";
				/*  去掉内外边距  */
				margin: 0;
				padding: 0;
				/*  无序列表： 有样式---“去样式：列表样式”  */
				lis t-style-type: none;
				/*  无序列表： 有样式---去全部样式   【理解：简写】
				    去全部样式： list-style-type  去掉列表项样式  
					            list-style   去掉列表项标记位置样式
								list-style-image  去列表项图片标记样式
					*/
				list-style: none;
			}
			/*  左栏效果
			   1.左栏空间区域  235*450  背景颜色
			   2.左栏区域内容【li】  加权  235*50  相对定位---挂靠点【固定位置】
			   3.给每一个区域内容【li】加鼠标移动上去改背景颜色
			   4.左栏弹出框效果： 400*450  1像素边框   绝对定位-钩子-微调
			*/
			aside{
				width: 265px;
				height: 525px;
				background: #bfbfbf;
				margin: 20px 50px auto;
			}
			aside ul.sidebar li{
				width: 235px;
				height: 50px;
				/*  相对定位————挂靠点  */
				position: relative;
				/*  文字垂直往左  */
				text-align: left;
				line-height: 50px;
				top: 15px;
				/* 内边距  */
				padding-left: 30px;
			}
			aside ul.sidebar li:hover{
				background: #ffffff;
				
			}
			aside ul.sidebar div.out{
				width: 400px;
				height: 450px;
				border: 1px solid #000;
				/*  挂靠位：绝对定位：按照相对定位基点开始定位  */
				position: absolute;
				left: 285px;
				/*  显示与隐藏  JavaScript  【JQuery框架】  */
				display: none;
			}
			/*  新增样式  */
			aside ul.sidebar li span{
				bor der: 1px solid red;
				float: right;
				/*  间隙 内边框  */
				padding-right: 50px;
				margin-top: 10px;
			}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构   结构化标记【语义化标签】  aside元素 
		    针对：左栏、广告、弹出效果....  有利于SEO优化 
			之前版本通过div+id起别名方式 【缺点: 繁琐、定义起名、冗杂】-->
			<aside>
				<ul class="sidebar">
					<!-- 弹出框 -->
					<div class="out"></div>
					<li>手机 平板 电话卡<span>></span></li>
					<li>电视 盒子<span>></span></li>
					<li>路由器 智能硬件<span>></span></li>
					<li>移动电源 插线板<span>></span></li>
					<li>耳机 音箱<span>></span></li>
					<li>电池 存储卡<span>></span></li>
					<li>保护套 后盖<span>></span></li>
					<li>贴膜 其他配件<span>></span></li>
					<li>米兔 服装<span>></span></li>
					<li>箱包 其他周边<span>></span></li>
				</ul>
			</aside>
			<script>
				//左栏弹出与隐藏  .hover事件源+css函数
				//抓  选择器 li
				$("aside ul.sidebar li").hover(function(){
					/*  弹出框默认：隐藏--hover悬停第一件事情：显示  */
					$("aside ul.sidebar div.out").css("display","block");
				},function(){
					$("aside ul.sidebar div.out").css("display","none");
				});
			</script>
	</body>
</html>

<!-- 事件源 .hover()  切换效果与css悬停hover一致
                      语法：.hover(function(){},function(){})
					  
 -->
